<template>
  <m-title style="margin-top: 30px">
    <Row justify="space-between" align="middle">
      <i-col>工具</i-col>
      <i-col>
        <div style="font-size: 14px; font-weight: normal" v-if="!simpleUtils.isMobile()">
          开启历史记录
          <Tooltip content="每个工具最多保存 30 条历史记录" placement="top-start">
            <Icon type="md-help-circle" :size="16"/>
          </Tooltip>
          ：
          <i-switch size="small" v-model="openToolHistory"
                    @on-change="status => $store.commit('setOpenToolHistory', status)"/>
          &nbsp;&nbsp;&nbsp;
          开启多窗口：
          <i-switch size="small" v-model="openModal" @on-change="onOpenModalChange"/>
        </div>
      </i-col>
    </Row>
  </m-title>
  <content-area class="tool-card" :title="`${ tool.meta.title }（共 ${ tool.children.length } 个）`"
                v-for="tool in toolRoutes" :key="tool.path">
    <div class="screen-container">
      <div class="tool-item screen-item" v-for="item in tool.children" :key="item.fullPath" :title="item.meta.desc"
           @click="openTool(item)">
        <div class="title over-ellipsis">{{ item.meta.title }}</div>
        <Ellipsis class="desc over-ellipsis" :text="item.meta.desc || ''" :lines="2"></Ellipsis>
      </div>
    </div>
  </content-area>
  <template v-for="(componentListItem, i) in componentMap">
    <Modal
      v-if="componentListItem"
      v-for="(componentItem, index) in componentListItem"
      :title="componentItem.title"
      v-model="componentItem.show"
      :draggable="true"
      sticky
      scrollable
      :mask="false"
      footer-hide
      :key="index"
      :width="componentItem.modalWidth ? (componentItem.modalWidth + 'px') : '660px'">
      <component :is="componentItem.name" class="modal-container" :key="componentItem.uid"></component>
    </Modal>
  </template>
</template>

<script>
import MTitle from "@/components/MTitle";
import ContentArea from "@/components/ContentArea";
import {routes} from "@/router";

export default {
  name: "ToolNavComponent",
  components: {ContentArea, MTitle},
  props: {
    searchKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      toolRoutes: [],
      openModal: false,
      openToolHistory: false,
      componentMap: {},
    }
  },
  watch: {
    searchKey: {
      handler(n) {
        this.filterTool();
      }
    }
  },
  methods: {
    openTool(route) {
      if (!this.openModal || this.simpleUtils.isMobile() || !route.modal) {
        // 如果没有打开多窗口或者是移动端，则跳转到指定页面
        this.$router.push(route.fullPath)
        return;
      }
      const routeItem = Object.assign({}, route);
      if (this.componentMap.hasOwnProperty(routeItem.name)) {
        // 判断组件缓存中是否有某种组件
        let hasHide = false;
        this.componentMap[routeItem.name] = this.componentMap[routeItem.name].map(item => {
          // 如果存在关闭的窗口，则直接打开
          if (!item.show && !hasHide) {
            item.show = true;
            item.uid = this.simpleUtils.uuid();
            hasHide = true;
          }
          return item;
        })
        if (!hasHide) {
          // 没有未打开的窗口则添加新的
          this.componentMap[routeItem.name].push({
            title: routeItem.meta.title,
            modalWidth: routeItem.meta.modalWidth,
            name: routeItem.name,
            show: true,
            uid: this.simpleUtils.uuid()
          })
        }
      } else {
        // 没有组件则创建添加
        this.componentMap[routeItem.name] = [{
          title: routeItem.meta.title,
          modalWidth: routeItem.meta.modalWidth,
          name: routeItem.name,
          show: true,
          uid: this.simpleUtils.uuid()
        }];
      }
    },
    onOpenModalChange(status) {
      this.openModal = status;
      this.$store.commit('setOpenModal', status);
    },
    filterTool() {
      // 只取toole的页面
      const toolPagesRoute = routes.find(item => item.path.includes("/toolPages"))
      if (toolPagesRoute && toolPagesRoute.children && toolPagesRoute.children.length > 0) {
        toolPagesRoute.clearCircular();
        const toolPagesRouteT = JSON.parse(JSON.stringify(toolPagesRoute));
        this.toolRoutes = toolPagesRouteT.children.map(item => {
          if (item.children) {
            item.children = item.children.filter(child => child.meta.title.toLowerCase().includes(this.searchKey.toLowerCase()));
          }
          return item;
        });
      }
    }
  },
  created() {
    this.filterTool();
    this.openModal = this.$store.getters.getOpenModal;
    this.openToolHistory = this.$store.getters.getOpenToolHistory;
  }
}
</script>

<style lang="scss" scoped>
.tool-card, .navigation-card {
  margin-top: 20px;
}

.tool-item {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  transition: all .4s;
  padding: 8px 12px;
  cursor: pointer;
  margin-bottom: 10px;

  .title {
    font-size: 14px;
    font-weight: bold;
    color: #1f1f1f;
    transition: all .2s;
  }

  .desc {
    font-size: 12px;
    font-weight: normal;
    color: #7a8b93;
    transition: all .8s;
  }

  &:hover {
    border-color: #0face0;
    border-width: 1px;
    background-color: rgba(128, 199, 243, 0.06);
    box-shadow: 2px 4px 6px rgba(0, 119, 255, 0.1);

    .title {
      color: #078fe5;
    }

    .desc {
      color: #3aadfc;
    }
  }
}
</style>
